<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-导航</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
    <script src="./layui/layui.js"></script>
</head>
<body>

    <!-- 
        导航:
            1.水平导航
                ul  class="layui-nav"
                li  class="layui-nav-item"
                二级菜单(dl(class="layui-nav-child") dd定义)

            2. 垂直导航
                ul  class="layui-nav layui-nav-tree"
                其他一样!

            3. 侧边栏导航
                ul  class="layui-nav layui-nav-tree layui-nav-side"
                其他一样!

            4. 切换导航栏的背景颜色
                类名加给ul即可
                    水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
                    垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

            5. 徽章
                加给li即可 <span class="layui-badge">6</span>
                    <li class="layui-nav-item layui-this"><a href="">产品 <span class="layui-badge">6</span></a></li>

            6. 面包屑导航



            
                 



    -->

    <!--  1.水平导航 -->
    <p> 1.水平导航</p>
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <!-- 设定layui-this来选中此导航(类似checked) -->
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>

    <hr style="background-color: red; height:5px;">
    <br/><br/>

    <!-- 垂直导航 -->
    <p> 2.垂直导航</p>
    <ul class="layui-nav layui-nav-tree" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <!-- 设定layui-this来选中此导航(类似checked) -->
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>


    <hr style="background-color: red; height:5px;">
    <br/><br/>

    <!--侧边导航  -->
    <!-- 
    <p>侧边导航</p>
    <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
    -->

    <hr style="background-color: red; height:5px;">
    <br/><br/>

    <!-- 徽章 -->
    <p> 5. 徽章样式</p>
    <ul class="layui-nav layui-nav-tree" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <!-- 设定layui-this来选中此导航(类似checked) -->
        <li class="layui-nav-item layui-this"><a href="">产品 <span class="layui-badge">6</span></a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>

    <hr style="background-color: red; height:5px;">
    <br/><br/>

    <!-- 面包屑导航 -->
    <p>面包屑导航</p>
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">国际新闻</a>
        <a href="">亚太地区</a>
        <a><cite>正文</cite></a>
    </span>

    <br><br>

    <p>亦或者当小导航使用</p>
    <span class="layui-breadcrumb" lay-separator="|">
        <a href="">娱乐</a>
        <a href="">八卦</a>
        <a href="">体育</a>
        <a href="">搞笑</a>
        <a href="">视频</a>
        <a href="">游戏</a>
        <a href="">综艺</a>
    </span>

    




    




    
</body>
<script>
    // 导航 依赖element模块
    layui.use('element', function(){
        var element = layui.element;
    });
</script>
</html>